<template>
  <div class="detail top-page">
    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 数据为空处理 -->
    <div class="main" v-if="mainPart">
      <!-- 轮播图 -->
      <detail-swipe :swipe-data="mainPart.topModule.housePicture.housePics" />

      <van-tabs v-model:active="active" scrollspy sticky :show-header="false">
        <van-tab title="设施">
          <detail-infos :top-infos="mainPart.topModule" />
        </van-tab>

        <van-tab title="设施">
          <detail-facility
            :house-facility="
              mainPart.dynamicModule.facilityModule.houseFacility
            "
          />
        </van-tab>

        <van-tab title="房东">
          <detail-landlord :landlord="mainPart.dynamicModule.landlordModule" />
        </van-tab>

        <van-tab title="评论">
          <detail-comment :comment="mainPart.dynamicModule.commentModule" />
        </van-tab>

        <van-tab title="须知">
          <detail-notice
            :order-rules="mainPart.dynamicModule.rulesModule.orderRules"
          />
        </van-tab>

        <van-tab title="地图">
          <detail-map :position="mainPart.dynamicModule.positionModule" />
        </van-tab>

        <van-tab title="价格">
          <detail-intro :price-intro="mainPart.introductionModule" />
        </van-tab>
      </van-tabs>
    </div>

    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="" />
      <div class="text">弘源旅途, 永无止境!</div>
    </div>
  </div>
</template>

<script setup>
import DetailSwipe from './cpns/detail_01-swipe.vue'
import DetailInfos from './cpns/detail_02-infos.vue'
import DetailFacility from './cpns/detail_03-facility.vue'
import DetailLandlord from './cpns/detail_04-landlord.vue'
import DetailComment from './cpns/detail_05-comment.vue'
import DetailNotice from './cpns/detail_06-notice.vue'
import DetailMap from './cpns/detail_07-map.vue'
import DetailIntro from './cpns/detail_08-intro.vue'
import { getDetailInfos } from '@/services'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 发送网络请求获取数据
const detailInfos = ref({})
// 计算属性 - 存储细分的数据
const mainPart = computed(() => detailInfos.value.mainPart)
getDetailInfos(route.params.id).then((res) => {
  detailInfos.value = res.data
})

// 监听返回按钮的点击
const onClickLeft = () => {
  router.back()
}
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>
